<template>
    <div>
        <input  v-model="searchMsg">
        <i @click="search" class="iconfont icon-sousuo"></i><br>
        <button  @click="kk">添加</button>
        <div class="mask" @click="kk" v-if="isShow"></div>
        <div v-if="isShow" class="container">
            <div class="title1">
                <span class="title-cancle" @click="kk">
                    X
                </span>
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="label">文章ID</div>
                    <input type="text" v-model="formData.id">
                </div>
                <div class="form-item">
                    <div class="label">文章标题</div>
                    <input type="text" v-model="formData.title">
                </div>
                <div class="form-item">
                    <div class="label">文章标签</div>
                    <input type="text" v-model="formData.label">
                </div>
                <div class="form-item">
                    <div class="label">作者</div>
                    <input type="text" v-model="formData.author">
                </div>
            </div>
            <div class="footer">
                <button class="confirm-btn" @click="addArticle" >确认</button>
            </div>
            
        </div>
        <div class="title">
            <input type="checkbox" class="item" @click="checkAll()" v-model="ischeckbox">
            <div class="item">文章ID</div>
            <div class="item">文章标题</div>
            <div class="item">文章标签</div>
            <div class="item">作者</div>
            <div class="item">操作</div>
        </div>
        <div class="content" v-for="(obj,index) in artileList" :key="index">
            <input type="checkbox" class="item" v-model="obj.checked">
            <div class="item">{{obj.id}}</div>
            <div class="item">{{obj.title}}</div>
            <div class="item">{{obj.label}}</div>
            <div class="item">{{obj.author}}</div>
            <div class="item">
                <button @click="editLisy(index)">编辑</button>
                <button type="danger" @click="deleteArticle(index)">删除</button>
            </div>
        </div>
    </div>
</template>
<script>
    import myButton from "../Lesson9/button.vue";
export default {
components: {
    myButton,
  },
        data() {
            
        return{
            searchMsg:"",
            // editIndex:0,
            arr:0,
            ischeckbox:false,
            formData:{
                id:"",
                title:"",
                label:"",
                author:"",
                checked:false
            },
            List:{
                id:"",
                title:"",
                label:"",
                author:"",
                checked:false
            },
            isShow:false,
            artileList:[
                {
                    id:"1",
                    title:"习近平谈治国理政",
                    label:"政治",
                    author:"习近平",
                    checked:false
                },
                {
                    id:"2",
                    title:"明朝那些事",
                    label:"历史",
                    author:"当年明月",
                    checked:false
                },
                {
                    id:"3",
                    title:"Vue3.x",
                    label:"计算器",
                    author:"尤雨溪",
                    checked:false
                },
            ],
            artileList2:[
                {
                    id:"001",
                    title:"习近平谈治国理政",
                    label:"政治",
                    author:"习近平",
                    checked:false
                },
                {
                    id:"002",
                    title:"明朝那些事",
                    label:"历史",
                    author:"当年明月",
                    checked:false
                },
                {
                    id:"003",
                    title:"Vue3.x",
                    label:"计算器",
                    author:"尤雨溪",
                    checked:false
                },
            ]
        }
    },
    methods:{
        search(){
            if(this.searchMsg){
                this.artileList=this.artileList2.filter((item)=>{
                    return item.title===this.searchMsg
                })
            }else{
                this.artileList=this.artileList2
            }
        },
        kk(){
            this.isShow=!this.isShow
        },
        addArticle(){
            if(this.arr==1){
                this.formData=this.List
                this.isShow=!this.isShow
            }else if(this.arr==0){
                this.artileList.push(this.formData)
                this.isShow=!this.isShow
                this.formData=this.List
                this.arr=0
            }
            this.ischeckbox=false
        },
        deleteArticle(index){
            this.artileList.splice(index,1)
        },
        editLisy(index){
            this.isShow=!this.isShow
            this.formData=this.artileList[index]
            this.arr=1
        },
        // confirm(){
        //     console.log(index)
        //     this.$emit("confirm",this.formData)
        //     this.isShow=false
        // },
        // showEditDialog(index){
        //     this.editIndex=index
        //     this.$refs.editDialog.show(this.artileList[index])
        // },
        // editItem(data){
        //     for(let key in data){
        //         this.artileList[this.editIndex][key]=data[key]
        //     }
        // },
        checkAll(){
            this.ischeckbox=!this.ischeckbox
            if (this.ischeckbox) {
                for (var i = 0; i < this.artileList.length; i++) {
                   this.artileList[i].checked=true
                }
            } else {
             for (var j = 0; j < this.artileList.length; j++) {
                   this.artileList[j].checked=false
                }
            }
        }
            
    }
}
</script>
<style scoped>
.title{
    display: flex;
    background:#f2f2f2;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    text-align: center;
}
.content{
    display: flex;
    background-color: wheat;
    border-bottom: 1px solid #eee;
    padding: 0 10px;
    text-align: center;
}
.item{
    flex:1;
    height: 50px;
    line-height: 50px;
    display: inline-flex;
}
.container{
    position: fixed;
    width: 400px;
    left: 50%;
    top: 20%;
    margin-left: -200px;
    height: 400px;
    border: 1px solid #ccc;
    background:#fff;
    z-index: 1100;
}
.title1{
    height: 50px;
    line-height: 50px;
    background-color: #001528;
    color: #fff;
    text-align: right;
}
.title-cancle{
    margin-right: 10px;
    cursor: pointer;
}
.form{
    padding: 20px;
}
.form-item{
    display: flex;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
}
.label{
    width: 100px;
}
.footer{
    text-align: right;
    padding: 10px;
}
.mask{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:#ccc;
    opacity: 0.5;
    z-index: 10;
}

</style>